<template>
  <div>
    <el-dialog
      title="订单管理"
      :visible.sync="configDialogVisible"
      width="1100px"
      top="5vh"
      center>
      <el-form :inline="true" ref="form" :rules="rules" :model="form" label-width="130px">
        <el-form-item label="销售单号">
          <el-input :v-model="form.sn" ></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input v-model="form.mac" ></el-input>
        </el-form-item>
        <el-form-item label="	产品编码" v-show="inputShow">
          <el-input v-model="form.deviceModel" ></el-input>
        </el-form-item>
        <el-form-item label="	产品名称" v-show="inputShow">
          <el-input v-model="form.merchantName" ></el-input>
        </el-form-item>
        <el-form-item label="	交期" v-show="inputShow">
          <el-input v-model="form.city" ></el-input>
        </el-form-item>
        <el-form-item label="	数量" v-show="inputShow">
          <el-input v-model="form.playCount" ></el-input>
        </el-form-item>
        
    
        <el-form-item style="width: 100%;margin:  10px 45% ">
          <el-button v-if="edit" type="primary" @click="submitForm">提交</el-button>
          <el-button v-else type="primary" @click="configDialogVisible = false">关闭</el-button>
          <el-button @click="clickClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="terminal-config-container">
      <el-row :gutter="30" class="filter-container">
        <el-col :span="24">
          <div>
            <el-input placeholder="销售单号" v-model="listQuery.sn" style="width: 200px;" clearable class="filter-item" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">{{ $t('table.search') }}</el-button>
          </div>
          <el-table v-loading="listLoading"
                    :key="tableKey"
                    :data="list"
                    border
                    fit
                    highlight-current-row>
            <el-table-column label="销售单号" prop="id" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.sn }}</span>
              </template>
            </el-table-column>
            <el-table-column label=" 客户名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.mac }}</span>
              </template>
            </el-table-column>
            <el-table-column label="交期" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.city }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品编码" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.deviceModel }}</span>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.merchantName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.playCount }}</span>
              </template>
            </el-table-column>
            <el-table-column label="单价" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.jia }}</span>
              </template>
            </el-table-column>
            <el-table-column label="金额" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.jin }}</span>
              </template>
            </el-table-column>
            
           
          </el-table>
          <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="getForm"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import {getTerminalConfigList, getSelectOptions, updateTerminalConfig} from '@/api/terminalConfig'

  export default {
    name: 'ComplexTable',
    components: {Pagination},
    data() {
      return {
        inputDisabled: true,
        inputShow: true,
        channelSelected: '',
        status: 'edit',
        channelOptions: [],
        playTypeOptions: [],
        editableTabsValue: '',
        listLoading: false,
        configDialogVisible: false,
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
        },
        form: {
        'sn': '11',
          'mac': 'fg',
            'city': 'sn',
              'deviceModel': 'sn',
                'merchantName': 'sss',
                  'merchantName': 'sss',
                    'playCount': '10',
                      'jia': '12',
                        'jin': '120',
         
          terminalPlatformInfoVos:[]
        },
        list: [
          {
            'sn': '11',
            'mac':'fg',
            'city': 'sn',
            'deviceModel': 'sn',
            'merchantName': 'sss',
            'merchantName': 'sss',
            'playCount': '10',
            'jia': '12',
            'jin': '120',
          },
          {
            'sn': '222',
            'mac': '天天干活',
            'city': 'sn',
            'deviceModel': 'sn',
            'merchantName': 'sss',
            'merchantName': 'sss',
            'playCount': '10',
            'jia': '12',
            'jin': '120',
          },
          {
            'sn': '333',
            'mac': '445',
            'city': 'sn',
            'deviceModel': 'sn',
            'merchantName': 'sss',
            'merchantName': 'sss',
            'playCount': '10',
            'jia': '12',
            'jin': '120',
          }
          ],
        total: 0,
        rules: {
          name: [
            {required: true, message: '请输入机构编号', trigger: 'blur'},
          ],
        },
        channelRules: {
          name: [
            {required: true, message: '请输入Appid', trigger: 'blur'},
          ],
        },
        groupRules: {
          name: [
            {required: true, message: '请输入id', trigger: 'blur'},
          ],
        },
        tableKey: '',
        activeValue: 1,
        inactiveValue: 0,
        submitSuccess:false,
        edit:true,
        selectTime:[new Date(2016, 9, 10, 0, 0,0), new Date(2016, 9, 10, 23, 59,59)]

      }
    },
    mounted() {
      //this.getList()
     // getSelectOptions().then(res => {
       // this.channelOptions = res.data.data.data.platfrom
      //})
    },
    computed: {
      getPosition() {
        return (this.form.latitude+','+this.form.longitude)
      },
      getPlayTotal(){
        let total = 0
        this.form.terminalPlatformInfoVos.forEach((item,index)=>{
          total =  total + parseInt(item.playCount)
        })
        this.form.playCount = total
        return total
      },
    },
    methods: {
     
      handleModifyStatus(row,status) {
        if(status==='edit'){
          this.edit =true
        }else {
          this.edit =false
        }
        this.listQuery.sn = row.sn
        this.getForm()
        this.configDialogVisible = true
      },
      getList(){
        if(this.listQuery.sn===undefined ||this.listQuery.sn === null || this.listQuery.sn===''){
          delete this.listQuery.sn

        }
        getTerminalConfigList(this.listQuery).then(res => {
          this.list = res.data.data.data.terminalBaseInfoVos
          this.list.forEach((item)=>{
            if(item.macAuth==='0'){
              item['macAuthName']='未授权'
            }else{
              item['macAuthName']='已授权'
            }
          })
          this.total = res.data.data.rowCount
        })


      },
      getForm() {
        getTerminalConfigList(this.listQuery).then(res => {
          this.form = res.data.data.data.terminalBaseInfoVos[0]
          if (this.form.terminalPlatformInfoVos.length > 0) {
            this.editableTabsValue = this.form.terminalPlatformInfoVos[0].platformName

          }
        })
      },
      openOption() {
        let op = document.getElementById('channelOptions')
        op.click()
      },
      handleTabsEdit(targetName, action) {
        if (action === 'remove') {
          let tabs = this.form.terminalPlatformInfoVos;
          tabs.forEach((tab, index) => {
            if (tab.platformName === targetName) {
              tabs.splice(index, 1)
            }
          });
          if (this.form.terminalPlatformInfoVos.length > 0) {
            this.editableTabsValue = this.form.terminalPlatformInfoVos[0].platformName
          } else {
            this.editableTabsValue = ''
          }
        }
      },
      submitForm() {
        this.submitSuccess=true
        updateTerminalConfig(this.form).then(res => {
          this.submitSuccess=false
          this.configDialogVisible = false
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        })
        // this.$refs.form.validate((valid) => {
        //   if (valid) {
        //     if (this.form.channel.length > 0) {
        //       this.form.channel.forEach((item, index) => {
        //         this.$refs['channel'][index].validate((valid) => {
        //           if (valid) {
        //             if (item.group.length > 0) {
        //               item.group.forEach((item2, index2) => {
        //                 this.$refs['group'][index2].validate((valid) => {
        //                   if (valid) {
        //                     alert('submit!');
        //                   } else {
        //                     return false;
        //                   }
        //                 });
        //               })
        //             } else {
        //               alert('submit!');
        //             }
        //           } else {
        //             return false;
        //           }
        //         });
        //       })
        //     } else {
        //       alert('submit!');
        //     }
        //   } else {
        //     console.log('error')
        //     return false;
        //   }
        // });
      },
      handleFilter() {
        this.listQuery.pageIndex = 1
        this.getList()
      },
      addChannel() {
        let name = ''
        let success = true
        this.form.terminalPlatformInfoVos.forEach((item, index) => {
          if (item.platform === this.channelSelected) {
            success = false
            return false
          }
        })
        this.channelDialogVisible = false
        if (success === false) {
          this.channelSelected = ''
          return
        }
        this.channelOptions.forEach((item, index) => {
          if (item.value === this.channelSelected) {
            name = item.name
          }
        })
        let channel = {
          platformName: name,
          platform: this.channelSelected,
          isUse: 1,
          terminalSlotInfoVos: []
        }
        this.editableTabsValue = channel.platformName
        this.channelSelected = ''
        this.form.terminalPlatformInfoVos.push(channel)
      },
      addGroup(group) {
        let obj = {
          adPlayCount: '',
          adSlotId: ''
        }
        group.push(obj)
      },
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .terminal-config-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    min-height: 600px;

    .filter-container {
      background-color: #ffffff;
      padding-top: 15px;
      margin-bottom: 50px;
      margin-top: -20px;
    }


  }

  .el-tabs__new-tab {
    display: none !important;
  }

  .el-form-item {
    margin-bottom: 11px;
  }

  .form-text {
    width: 300px;
  }
 .el-input__inner {

    color: #1e1f20 !important;

  }
</style>
